<template>
  <el-input
    v-model="modelValue"
    :size="props.size"
    @change="handleChange"
    class="input-box"
  >
    <template #append>
      <el-color-picker
        v-model="modelValue"
        :size="props.size"
        show-alpha
        @change="handleChange"
      />
    </template>
  </el-input>
</template>

<script setup>
const modelValue = defineModel();
const emit = defineEmits(['change']);
const props = defineProps({
  size: String,
});

const handleChange = (val) => {
  emit('change', val);
};
</script>

<style scoped lang="scss">
.input-box {
  :deep(.el-input-group__append) {
    padding: 0!important;
    .el-color-picker__trigger {
      border: none;
      padding: 0!important;
      width: 40px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    .el-color-picker--small .el-color-picker__trigger {
      width: 25px;
    }
    .el-color-picker__color {
      border: none;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;

    }
    .el-color-picker__color-inner {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}
</style>